<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% include 'base/css.html' %}
    <link rel="stylesheet" href="{% static 'css/login.css' %}">
</head>
<body>
<div>
    <form class="form-horizontal center-form center-box"
          method="post">
        {% csrf_token %}
        <div class="form-group {% if errors.name %}has-error{% endif %}">
            <label class="col-sm-2 control-label text-right">账号</label>
            <!-- <div class="col-sm-{% if errors.name %}6{% else %}10{% endif %}"> -->
            <div class="col-sm-10">
                <input name="name" type="text"
                       class="form-control"
                       placeholder="手机号或用户名" value="{{ form.name.value }}">
            </div>
            <!--
            {% if errors.name %}
                 <div class="col-sm-4 text-danger mid">
                    {{ errors.name.0.message }}
                </div>
            {% endif %}
            -->
        </div>
        <div class="form-group {% if errors.pwd %}has-error{% endif %} ">
            <label class="col-sm-2 control-label text-right">口令</label>
            <!-- <div class="col-sm-{% if errors.name %}6{% else %}10{% endif %}"> -->
            <div class="col-sm-10">
                <input type="password"
                       name="pwd"
                       value="{{ form.pwd.value }}"
                       class="form-control" placeholder="输入您的口令">
            </div>
            <!--
            {% if errors.pwd %}
                <div class="col-sm-4 text-danger mid">
                    {{ errors.pwd.0.message }}
                </div>
            {% endif %}
            -->
        </div>
        <div class="form-group">
            <div class="col-sm-offset-6 col-sm-6 text-right">
                <button class="btn btn-primary">登录</button>
                <button type="reset" class="btn btn-danger">重置</button>
            </div>
        </div>
    </form>
</div>
<!-- 模态框 -->
<div class="modal fade error-modal"
     tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-large " role="document">
    <div class="modal-content">
        <!-- 头部分 -->
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">验证错误</h4>
        </div>

        <ul class="modal-body">
        <!-- django模板的点语法：对象的属性和方法， 列表的下标 -->
        {% for value in errors.values %}
            <!-- value 是 python的list -->
            <li>
               - <span class="text-danger">{{ value.0.message }}</span>
            </li>
        {% endfor %}
        </ul>
        <!-- 底部 -->
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
        </div>
    </div>
  </div>
</div>

{% include 'base/js.html' %}
{% if errors %}
    <script>
        // 显示模态框
        // jQuery
        $('.error-modal').modal('show')
        // $('form').serialize()
    </script>
{% endif %}
<script>
    $(function () {
        $('form input').on('input', function () {
            // alert(this.value)
            $('.has-error').removeClass('has-error')
        })
    })
</script>
</body>
</html>